{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/zhonchou_home.css?version={$version}" type="text/css" rel="stylesheet"> -->
<style type="text/css">
body{
	background: #F3F3F3;
	padding-bottom: 2.5rem;
}
.com_header{
	height: 2.2rem;
	font-size: 0.9rem;
	line-height: 1.25rem;
	padding: 0.45rem 0.6rem 0.5rem;
	background: rgba(248,248,248,0.98);
	box-sizing: border-box;
	text-align: center;
	border-bottom: 1px solid #E1E1E1;
	position: fixed;
	top:0;
	left:0;
	right: 0;
	z-index: 100;
	color: #575F67;
	font-weight: bold;
}
.com_header .go_back{
	padding: 0.6rem;
	position: absolute;
	left:0;
	top:0;
}
.com_header .go_back .icon_back{
	background: url(/Public/Images/img/icon_return_head.png) no-repeat;
	background-size: 100%  100%;
	width: 0.55rem;
	height: 1.0rem;
	display: block;
}
.reply{
}
h5{
	font-size: .6rem;
    line-height: .85rem;
    color: #B4B4B4;
    padding: .35rem .6rem;
}
.add_main{
	padding:.35rem .6rem .5rem;
	background: #fff;
}
.add_main textarea{
	width: 100%;
	resize: none;
	line-height: 1rem;
	font-size: .7rem;
	color: #B4B4B4;
}
.icon_upload{
	width: 1.3rem;
	height: 1.3rem;
	background: url(/Public/Images/img/icon_fatie_addpic@3x.png) no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	margin-right: 1rem;
}
.icon_voice{
	width: 1.3rem;
	height: 1.3rem;
	background: url(/Public/Images/img/icon_fatie_yuyin@3x.png) no-repeat;
	background-size: 100% 100%;
	display: inline-block;
}
.fixed_bot{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FF6600;
	font-size: .9rem;
	padding:.6rem;
	text-align: center;
	color: #FFFFFF;
}
.tips{
	padding: .6rem;
}
.tips p{
	font-size: .7rem;
	color: #909090;
	margin-bottom: .15rem;
}


.img_list{
	
}
.img_list li{
	width: 3.5rem;
	height: 3.5rem;
	float: left;
	margin-right: .6rem;
	margin-bottom: .6rem;
	position: relative;
}
.img_list li img{
	width: 100%;
	height: 100%;
	display: block;
}
.img_list li .del_img{
	position: absolute;
	width: .8rem;
	height: .8rem;
	right: -.4rem;
	top:-0.4rem;
	display: block;
	background: url(/Public/Images/img/icon_fatie_deletepic@3x.png) no-repeat;
	background-size: 100% 100%;
}
</style>
{/block}
{block name="content"}

	
	<div class="com_header">
		<a href="javascript:;" class="go_back"><i class="icon_back"></i></a>{$head_title}
	</div>
	<form>
		<div class="reply" style="margin-top: 2.2rem">
			<h5>悬赏答案</h5>
			<div class="add_main">
				<textarea placeholder="请输入您的答案" rows="3" id="content" name="content"></textarea> 
				<div>
					<span class="icon_upload" id="upload_btn"></span>
				</div>
				<!-- <a href="javascript:;" class="icon_voice"></a> -->

				<input type="file" name="file" style="display: none;" id="uploader" >
				<input type="hidden" name="uptoken" id="uptoken" value="{$up_token}">
	    		<input type="hidden" name="image_domain" id="image_domain" value="{$image_domain}">
	        	<input type="hidden" class="img_url" id="img_url" value="">

	        	<ul class="img_list clearfix" id="img_list1">
	        	</ul>
			</div>
		</div>
		<div class="tips">
			<p>1、您的答案将对其他用户隐藏</p>
			<p>2、如果{$reward_days}天内题主采纳了您的答案，您将获得所有赏金</p>
			<p>3、如果{$reward_days}天后题主尚未采纳任何的答案，您将和所有答主随机分配所有赏金</p>
			<p>4、所有围观用户的消耗将有{$look_rate}%分配给原题主，另{100 - $look_rate}%计入到赏金总额。</p>
		</div>
	</form>
	
	<div class="fixed_bot" id="post"> 
		发表
	</div>
{/block}
{block name="js"}
<script>
	var uptoken = $('#uptoken').val()
var image_domain = $('#image_domain').val();
var posting = false;
var post_id = parseInt('{$post_id}');

</script>
<script type="text/javascript" src="__JS__/plupload_js/moxie.min.js"></script>
<script type="text/javascript" src="__JS__/plupload_js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="__JS__/plupload_js/plupload.min.js"></script>

<script type="text/javascript" src="__JS__/qiniu.js"></script>
<script src="/Public/Js/front/js/my_answer.js"></script>
{literal}
<script type="text/javascript">

//输入框自适应
$("#content").each(function(){
    this.style.height = this.scrollHeight + "px";
});
$("#content").on({
    input:function(){
        var _this = this;
        this.style.height = this.scrollHeight + "px";
    },
    propertychange:function(){
        this.style.height = this.scrollHeight + "px";
    }
});
$(document).on("input propertychange", "#content", function (e) {
   var target = e.target;
   // 保存初始高度，之后需要重新设置一下初始高度，避免只能增高不能减低。           
    var dh = $(target).attr('defaultHeight') || 0;
    if (!dh) {
        dh = target.clientHeight;
        $(target).attr('defaultHeight', dh);
    }
    target.style.height = dh +'px';
    var clientHeight = target.clientHeight;
    var scrollHeight = target.scrollHeight;
    if (clientHeight !== scrollHeight) { target.style.height = scrollHeight + 10 + "px";
    }
});
	//七牛多图上传
 var uploader = new plupload.Uploader({
        runtimes : 'html5',
        browse_button : 'upload_btn', //触发文件选择对话框的按钮，为那个元素id
        url : 'http://up.qiniu.com/', //服务器端的上传页面地址
        flash_swf_url : '/Public/Js/plupload_js/Moxie.swf',//swf文件，当需要使用swf方式进行上传时需要配置该参数
        silverlight_xap_url : '/Public/Js/plupload_js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
        filters : {
            // 设置大小
            max_file_size : '10mb',
            // 允许上传的类型
           mime_types: [
             // {title : "Image files", extensions : "png,jpeg,gif,bmp,jpg"},
           ]
        },
        multipart: true,
          //设置post传给七牛的token
          multipart_params: {
           'token': uptoken, 
          },
          //修改post字段为七牛的file
          file_data_name: 'file',
          init: {
                PostInit: function() {

                    console.log("upload init");
                    console.log($('.moxie-shim').children())
                    if(!is_ios()){
                        $("input[type=file]").attr({
                            'capture':'camera',
                            'accept':'image/*'
                        });
                    }
                },
                FilesAdded: function(up, files) {

                    //选择文件后直接上传， 或可改成点击按钮上传
                    uploader.start();
                },
                UploadProgress: function(up, file) {

                },
                FileUploaded: function(up, file, info) {
                   console.log(info)
                    // var res = $.parseJSON(info);  
                    // var res = eval('"'+info+'"');  
                    var res = info.response;
                    console.log(res)
                    var r = eval('('+res+')');
                    console.log(r);
                    var sourceLink = image_domain + r.key; //获取上传成功后的文件的Url  
                    var  html = '<li><img src="'+sourceLink+'?imageView2/1/w/200/h/200/imageslim" alt="" data-link="'+sourceLink+'"><span class="del_img" onclick="del_img(this)"></span></li>';
                            
                            var container = $('#img_list1');

                            container.append(html);
                            console.log('finish');
                            var imgs = $('#upload_btn').parent().siblings('.img_url').val();
                            imgs += ','+sourceLink;
                            $('#upload_btn').parent().siblings('.img_url').val(imgs);
                },
                UploadComplete: function(up, files) {
                    // Called when all files are either uploaded or failed
                    console.log('[完成]');
                },
                Error: function(up, err) {
                    // alert(err.response);
                }
            } 
    });  

    uploader.init();
    if(!is_ios()){
        $("input[type=file]").attr({
            'capture':'camera',
            'accept':'image/*'
        });
    }

function del_img(obj){
    var obj_init = $(obj);
    obj_init.parent().remove();
    var imgs = '';
    $('#img_list1 li').each(function(){
        imgs += $(this).find('img').data('link');
    })
    $('#img_url').val(imgs)
}

</script>
{/literal}
{/block}